<!DOCTYPE html>
<html>
  <head>
    <title>PhotoGallery main page</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="styles/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="styles/viewx.css">
    <link rel="stylesheet" type="text/css" href="styles/common.css">
    <link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
    <!--[if lt IE 9]>
      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <script src="js/dom.js" type="text/javascript"></script>
    <script src="js/ajax.js" type="text/javascript"></script>
    <script src="js/framework.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/registration.js"></script>
    <script type="text/javascript" src="js/tags.js"></script>
    <script type="text/javascript" src="js/validation.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCwyB8M2Z5_083GO2hDU5lMqiofzuYw-58&sensor=false"></script>
  </head>
  <body>
<noscript>You must set your browser to enable Javascript in order to access certain functions of this site.</noscript>
    <!-- Main Wrapper -->
    <div id="main-wrapper">
      <div data-template="header" class="loader"></div>
      <div id="content">
        <div class="image-wrapper loader">

          <div id="rating" class='hided-rating'>
            <div class="mark">
                <div id="avr-rating" class="rate-value"></div>
                <div class="icon icon-star"></div>
            </div>
            <div class="rate-bar hidden">
                <div id="user-rating" class="rate-value">0.0</div>
                <div class="rate-container">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
        </div>
        
        <div id="geo-location">
            <div class="map-icon"></div>
        </div>

          <img src="" alt="" class="big-image">
          <div class="image-info">
          </div>
        </div>
        <div class="thumbs-wrapper loader">
          <div id="prev" class="hidden"></div>
          <div id="next" class="hidden"></div>
          <div class="thumbs-container">
            <div id="thumbs" class="hidden"></div>
          </div>
        </div>
      </div>

      <div data-template="footer" class="loader"></div>

    </div>
    <script type="text/javascript">
    getThumbs();

    window.onhashchange = function() {
      getThumbs();
    };

    function getThumbs() {
      ajax({
        url: rewriteURL(),//'./ajax/getPhotoList.php',
        method: 'GET',
        parse_json: true,
        success: function (response) {
          var len = response.data.length;
          console.log('images: ' + len);
          console.log(response);
          dom('.thumbs-wrapper').removeClass('loader');
          dom('#thumbs').removeClass('hidden');

          if (len > 0) {
            var html = '';

            for (var i=0; i<len; i++) {
              html += '<img src="thumbs/' + response.data[i].filename + '" class="thumb" data-index="' + i + '">';
            }

            dom('#thumbs').html(html); // display thumbs bar

            showImage(dom('.thumb').elements[0], response.data); // show first image

            dom('.thumb').click(function(e, data) {
              e = e || event;
              var img = e.target || event.srcElement;
              showImage(img, data);
            }, response.data);

            showThumbs();

          } else {
            dom('#thumbs').html('<span>No images :(</span>');
            dom('.big-image').elements[0].src = '';
            dom('.image-info').html('No info!');
          }

          window.onresize = function(event) {
            showThumbs();
          }
        },
        error: function() { alert('AJAX ERROR :('); }
      });
    }

    function showThumbs() {
      var thumbsContainerDiv = dom('.thumbs-container').elements[0];
      var thumbsDiv = dom('#thumbs').elements[0];

      var imagesWidth = getSumOfImagesWidth(); // get width all images + margin (2px+2px)
      var containerWidth = thumbsContainerDiv.clientWidth;
      var marginValue = imagesWidth - containerWidth;

      if (marginValue > 0) {
        thumbsDiv.style['width'] = imagesWidth + 'px';
        dom('.thumb').addClass('left');
        dom('#prev').removeClass('hidden');
        dom('#next').removeClass('hidden');

        dom('#prev').elements[0].onclick = function() {
          thumbsDiv.style.marginLeft = 0 + 'px';
        };

        dom('#next').elements[0].onclick = function() {
          thumbsDiv.style.marginLeft = '-' + marginValue + 'px';
        };
      } else {
        thumbsDiv.style['width'] = 'auto';
        dom('.thumb').removeClass('left');
        dom('#prev').addClass('hidden');
        dom('#next').addClass('hidden');
      }
    }

    //show selected image
    function showImage(img, data) {
      var i = parseInt(img.getAttribute('data-index'));
      var path = img.src.replace('thumbs','photos');
      dom('.thumb').removeClass('selected');

      dom('.big-image').elements[0].src = path;
        
      
      var info = '<div class="info-title">' + data[i].title + '</div>';
      info += '<div class="info-date">' + data[i].date + '</div>';
      info += '<div class="info-description">' + data[i].description + '</div>';
      info += '<div id="info-tags">' + data[i].tags + '</div>';
      dom('.image-info').html(info);
      showTags(data[i].tags, "info-tags"); // show tags

      var avrRating = parseFloat(data[i].rating).toFixed(1);
      if(dom('#avr-rating')) {
          dom('#avr-rating').html(avrRating);
      }

      if(dom("#user-rating")) {
          setRatingBar(data[i].id);
      }
      
      dom("#geo-location").elements[0].onclick = function() {
          loadMap(data[i]);
      }
      img.className += ' selected';
    }

    function getSumOfImagesWidth() {
      var sum = 0;
      var imgs = dom('.thumb').elements;
      var len = imgs.length;
      var margin = 4;

      for (var i=0; i<len; i++) {
        sum += imgs[i].width + margin;
      }

      sum -= margin;

      return sum;
    }

    function rewriteURL(url) {
      var url = url || window.location.href;
      var ajax_url = './ajax/getPhotoList.php';

      if (url.indexOf('view.html') != -1) {
        var arr = url.split('#');

        if (arr.length > 1) {
          var hash = arr[1].split('/', 2);

          if (hash.length == 2) {
            switch (hash[0]) {
              case 'category':
                ajax_url += '?categoryid=' + parseInt(hash[1])
                break
              case 'search':
                ajax_url += '?search=' + hash[1]
                break
              case 'photographer':
                ajax_url += '?userid=' + parseInt(hash[1])
                break
              case 'photo':
                ajax_url += '?photoid=' + parseInt(hash[1])
                break
              default:
                console.log('unknown match')
            }
          }

          return ajax_url;
        } else {
          return ajax_url;
        }
      } else {
        return url;
      }
    }

    dom('.big-image').click(function(e) {
      e = e || event;
      var img = e.target || event.srcElement;
      framework.showImageFullScreen(img.src);
    });

    </script>
  </body>
</html>